<template>
  <div id="score-inquire"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
  >
    <h2>成绩查询</h2>
    <el-row>
      <el-col :span="5">
        <el-input type="text"
          v-model="search"
          clearable
          @change="searchMethods()"
          placeholder="请输入学号或姓名查询">
        </el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button @click="searchMethods()" type="primary">查询</el-button>
      </el-col>
      <el-tag style="float:right">{{school}}</el-tag>
    </el-row>
    <el-table ref="refTable" id="table"
      :data="filterTableData"
      stripe
      style="width: 100%"
      height="666">
      <el-table-column
        fixed
        prop="id"
        sortable
        label="学号"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="chinese"
        :filters="[{text: '小于50', value: '<50'}, {text: '小于90', value: '<90'}, {text: '大于90', value: '>=90'}]"
        :filter-method="qualifiedFilter"
        label="语文">
      </el-table-column>
      <el-table-column
        prop="math"
        :filters="[{text: '不及格', value: '<90'}, {text: '及格', value: '>=90'}]"
        :filter-method="qualifiedFilter"
        label="数学">
      </el-table-column>
      <el-table-column
        prop="english"
        :filters="[{text: '不及格', value: '<90'}, {text: '及格', value: '>=90'}]"
        :filter-method="qualifiedFilter"
        label="英语">
      </el-table-column>
      <el-table-column
        prop="physics"
        label="物理"
        :filters="[{text: '不及格', value: '<60'}, {text: '及格', value: '>=60'}]"
        :filter-method="qualifiedFilter">
      </el-table-column>
      <el-table-column
        prop="chemistry"
        label="化学">
      </el-table-column>
      <el-table-column
        prop="biological"
        label="生物">
      </el-table-column>
      <el-table-column
        prop="c"
        label="c语言">
      </el-table-column>
      <el-table-column
        prop="java"
        label="java">
      </el-table-column>
      <el-table-column
        prop="javascript"
        label="javascript">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'score-inquire',
  props: ['school'],
  data () {
    return {
      loading: true,
      id: this.$route.params.id,
      search: '',
      tableData: [],
      filterTableData: []
    }
  },
  created () {
    this.getScore()
  },
  methods: {
    qualifiedFilter (filterValue, currentRow, currentCol) {
      // 会把每一行都传进来， 就是每一行都会调用这个函数,根据返回的真假来是否显示某一行
      // 如果有多选就会依次传入，先传入第一个筛选条件， 如果第一个匹配，那么这一行就可以显示， 直接跳到下一行又开始匹配
      // 如果第一个没有匹配， 那么就传入第二个筛选条件，又和上面的一样重复执行
      console.log('arguments', arguments)
      let value = currentRow[currentCol.property] // 当前行当前列的值
      if (filterValue.slice(0, 1) === '<') {
        return value < filterValue.slice(1)
      } else {
        return value >= filterValue.slice(2)
      }
    },
    getScore () {
      this.loading = true
      setTimeout(() => {
        axios.get('/mymenu/score/' + this.$route.params.id).then(res => {
          console.log("---------------------", res)
          this.tableData = res.data
          this.filterTableData = res.data
          console.log("---------------------", this.filterTableData)
          this.loading = false
        }).catch(() => {
          // console.log('this', this)
          // this.$router.push('/404')
          this.filterTableData = []
          this.loading = false
          // console.log('this.$router', this.$router)
          // this.$router.push('/mymenu/')
        })
      }, Math.random() * 2000)
    },
    searchMethods () {
      this.filterTableData = this.tableData.filter(obj => (obj.name.toLowerCase()
        .includes(this.search.toLowerCase()) || obj.id.toString().includes(this.search)))
    }
  },
  computed: {},
  watch: {  // 监听路由的变化
    $route (to, from) {
      this.getScore()
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  text-align: center;
}

#score-inquire .el-row .el-col {
  margin-bottom: 10px;
}
.el-input{
  // min-width: 210px;
}
</style>
